HTML slot 插槽元素深入 « 张鑫旭

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10125 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

无论是实例组件还是 HTML 组件，传参都是免不了的。

以 Web Components 组件举例，我们要传递宽度和高度，就可以使用自定义的 width 或 height 属性，例如：

但有时候，我们需要传递的参数是一段 HTML 内容，这个时候，这段 HTML 该如何传入组件内？

此时就需要使用插槽元素 。

元素只能在 Shadow DOM 中使用才有插槽效果，否则，就可以看成是个普通的 HTML 元素。

例如，直接在 元素下的这段 HTML 代码是无效的，即图片元素是无法替换“占位元素”这个内容的：

内容：占位元素

可以说， 元素就是为 Web Components 组件开发而设计的。

下面通过一个简单的例子带大家了解下 元素的作用。

以 alert 弹框组件示意，弹框的结构其实是固定的，变化的是提示的内容，此时提示内容就可以作为参数传进去，然而，有时候提示内容的结构会比较复杂，是一个复合的 DOM 结构，就非常适合使用 元素实现。

我们不妨定义一个名为 ‘zxx-alert’ 的弹框组件，为了示意简明，组件样式和 HTML 结构我们放在 元素中，如下所示：

确定

其中，就出现了插槽元素，其 HTML 代码如下所示：

表示这部分内容是可以在外部，被自定义元素中的其他 HTML 替换掉的。

当然，要想生效，需要转换成 Shadow DOM 元素，并作为自定义组件的一部分，相关执行代码如下所示：

此时，只需要在 元素内设置好对应的匹配插槽的内容（通过 slot 属性和 元素的 name 值匹配），这部分内容就可以作为提示信息出现了，例如：

插槽执行成功！

此时，就有类似下图的效果：

DOM 内容作为参数变成了 alert 提示框的提示内容了，可以看出，使用 元素实现动态内容呈现会非常的灵活。

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=10125（作者张鑫旭）

一句话概括就是：

插槽元素的name 属性值和任意 HTML 元素的 slot 属性值一致的时候会被匹配。

具体细节如下：

支持 name 属性，可以看成是身份标识，需要是唯一的，因为多个相同 name 最多只会匹配一个插槽元素。例如：

暂无提示信息 +1

确定

下面这个 name="alert" 插槽元素就不会被 HTML 替换，如下下图所示（下面这行文字）：

而 slot 属性值可以不唯一，例如下面这段 HTML 代码如下所示：

插槽执行成功！

插槽执行成功 +1！

会看到两段执行成功的提示，如下图所示（截自 Firefox 浏览器）：

同一个组件可以使用多个插槽，例如，预留一个按钮的位置：

确定

插槽执行成功！

此时可以看到，不仅提示内容被插入了，取消按钮也一并插入到了弹框之中，效果如下截图所示：

用来匹配的元素也必须写在自定义元素组件中，作为子元素存在，例如下面配对元素在自定义元素之外，是没有插槽效果的：

插槽执行成功！

以及下面这种，匹配元素不是子元素，而是子元素的子元素，也是无法作为有效的插槽显示的：

插槽执行成功！

效果如下，可以看到并没有取消按钮：

即使 元素设置 display:contents 也无效。

以弹框中的取消按钮举例，如果给取消按钮的插槽添加事件呢？

插槽执行成功！

是这样的，虽然视觉上，匹配元素替换了插槽元素，实际上，两者的位置并未发生变化，其 HTML 结构关系如下图所示：

因此，要实现点击弹框中的取消按钮关闭弹框，只需要在原始的 元素或者匹配的 元素上写事件就可以，DOM 层级关系依然按照原始的 DOM 关系处理就可以了。

例如，下面两种处理都可以关闭弹框：

插槽执行成功！